<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta name="author" content="Vincent Link, Steffen Lohmann, Eduard Marbach, Stefan Negru, Vitalis Wiens" />
    <meta name="keywords" content="webvowl, vowl, visual notation, web ontology language, owl, rdf, ontology visualization, ontologies, semantic web" />
    <meta name="description" content="WebVOWL - Web-based Visualization of Ontologies" />
    <meta name="robots" content="noindex,nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" type="text/css" href="css/webvowl.css" />
    <link rel="stylesheet" type="text/css" href="css/webvowl.app.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <title>知识可视化</title>
</head>

<body>

    <main>

        <section id="canvasArea">
            <div id="browserCheck" class="hidden">
                WebVOWL does not work properly in Internet Explorer and Microsoft Edge. Please use another browser, such as
                <a href="http://www.mozilla.org/firefox/">Mozilla Firefox</a> or
                <a href="https://www.google.com/chrome/">Google Chrome</a>, to run WebVOWL.
                <label id="killWarning">Hide warning</label>
            </div>

            <div id="logo">


                <h2> <br/><span></span></h2>

            </div>
            <div id="loading-info">
                <div id="loading-error" class="hidden">
                    <div id="error-info"></div>
                    <div id="error-description-button" class="hidden">Show error details</div>
                    <div id="error-description-container" class="hidden">
                        <pre id="error-description"></pre>
                    </div>
                </div>
                <div><span id="sidebarExpandButton"> > </span></div>

                <div id="loading-progress" class="hidden">
                    <span>Loading ontology... </span>
                    <div class="spin">&#8635;</div><br>
                    <div id="myProgress">
                        <div id="myBar"></div>
                    </div>

                </div>
            </div>


            <div id="graph"></div>
        </section>
        <aside id="detailsArea">

            <section id="generalDetails">
                <h1 id="title"></h1>
                <span><a id="about" href=""></a></span>
                <h5>版本: <span id="version"></span></h5>
                <h5>作者: <span id="authors"></span></h5>
                <h5>
                    <label>语言: <select id="language" name="language" size="1"></select></label>
                </h5>
                <h3 class="accordion-trigger accordion-trigger-active">描叙</h3>
                <div class="accordion-container scrollable">
                    <p id="description"></p>
                </div>
                <h3 class="accordion-trigger">元数据</h3>
                <div id="ontology-metadata" class="accordion-container"></div>
                <h3 class="accordion-trigger">统计</h3>
                <div class="accordion-container">
                    <p class="statisticDetails">类: <span id="classCount"></span></p>
                    <p class="statisticDetails">对象支柱.: <span id="objectPropertyCount"></span></p>
                    <p class="statisticDetails">数据类型支柱.: <span id="datatypePropertyCount"></span></p>
                    <div class="small-whitespace-separator"></div>
                    <p class="statisticDetails">个人: <span id="individualCount"></span></p>
                    <div class="small-whitespace-separator"></div>
                    <p class="statisticDetails">节点: <span id="nodeCount"></span></p>
                    <p class="statisticDetails">边缘: <span id="edgeCount"></span></p>
                </div>
                <h3 class="accordion-trigger" id="selection-details-trigger">选择细节</h3>
                <div class="accordion-container" id="selection-details">
                    <div id="classSelectionInformation" class="hidden">
                        <p class="propDetails">名称: <span id="name"></span></p>
                        <p class="propDetails">类型: <span id="typeNode"></span></p>
                        <p class="propDetails">当量.: <span id="classEquivUri"></span></p>
                        <p class="propDetails">不相交: <span id="disjointNodes"></span></p>
                        <p class="propDetails">特征.: <span id="classAttributes"></span></p>
                        <p class="propDetails">个人: <span id="individuals"></span></p>
                        <p class="propDetails">描叙: <span id="nodeDescription"></span></p>
                        <p class="propDetails">评论: <span id="nodeComment"></span></p>
                    </div>
                    <div id="propertySelectionInformation" class="hidden">
                        <p class="propDetails">名称: <span id="propname"></span></p>
                        <p class="propDetails">类型: <span id="typeProp"></span></p>
                        <p id="inverse" class="propDetails">逆: <span></span></p>
                        <p class="propDetails">领域: <span id="domain"></span></p>
                        <p class="propDetails">范围: <span id="range"></span></p>
                        <p class="propDetails">子支柱.: <span id="subproperties"></span></p>
                        <p class="propDetails">父支柱.: <span id="superproperties"></span></p>
                        <p class="propDetails">当量.: <span id="propEquivUri"></span></p>
                        <p id="infoCardinality" class="propDetails">基数: <span></span></p>
                        <p id="minCardinality" class="propDetails">最小基数: <span></span></p>
                        <p id="maxCardinality" class="propDetails">最大基数: <span></span></p>
                        <p class="propDetails">特征.: <span id="propAttributes"></span></p>
                        <p class="propDetails">描叙: <span id="propDescription"></span></p>
                        <p class="propDetails">评论: <span id="propComment"></span></p>
                    </div>
                    <div id="noSelectionInformation">
                        <p><span>请在可视化中选择一个元素。</span></p>
                    </div>
                </div>
            </section>
        </aside>
        <!--<nav id="optionsArea" style="display:none">-->
        <nav id="optionsArea">
            <ul id="optionsMenu">
                <!--<li id="aboutMenu"><a href="#">关于</a>-->
                    <!--<ul class="toolTipMenu aboutMenu">-->
                        <!--<li><a href="license.txt" target="_blank">MIT许可 &copy; 2014-2017</a></li>-->
                        <!--<li id="credits" class="option">WebVOWL开发人员:<br/> Vincent Link, Steffen Lohmann, Eduard Marbach, Stefan Negru, Vitalis Wiens-->
                        <!--</li>-->

                        <!--<li><a href="http://vowl.visualdataweb.org/webvowl.html#releases" target="_blank">版本: 1.0.6<br/></a></li>-->

                        <!--<li><a href="http://purl.org/vowl/" target="_blank">元音规范 &raquo;</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <li id="pauseOption"><a id="pause-button" href="#">暂停</a></li>
                <li id="resetOption"><a id="reset-button" href="#" type="reset">刷新</a></li>
                <li id="moduleOption"><a href="#">模式</a>
                    <ul class="toolTipMenu module">
                        <!--<li class="toggleOption" id="helicopterZoom"></li>-->
                        <!--<li class="toggleOption" id="grassHopperZoom"></li>-->
                        <li class="toggleOption" id="dynamicLabelWidth"></li>
                        <li class="toggleOption" id="pickAndPinOption"></li>
                        <li class="toggleOption" id="nodeScalingOption"></li>
                        <li class="toggleOption" id="compactNotationOption"></li>
                        <li class="toggleOption" id="colorExternalsOption"></li>
                    </ul>
                </li>
                <li id="filterOption"><a href="#">过滤</a>
                    <ul class="toolTipMenu filter">
                        <li class="toggleOption" id="datatypeFilteringOption"></li>
                        <li class="toggleOption" id="objectPropertyFilteringOption"></li>
                        <li class="toggleOption" id="subclassFilteringOption"></li>
                        <li class="toggleOption" id="disjointFilteringOption"></li>
                        <li class="toggleOption" id="setOperatorFilteringOption"></li>
                        <li class="slideOption" id="nodeDegreeFilteringOption"></li>
                    </ul>
                </li>
                <li id="gravityOption"><a href="#">重力</a>
                    <ul class="toolTipMenu gravity">
                        <li class="slideOption" id="classSliderOption"></li>
                        <li class="slideOption" id="datatypeSliderOption"></li>
                    </ul>
                </li>
                <li id="export"><a href="#">导出</a>
                    <ul class="toolTipMenu export">
                        <li><a href="#" download id="exportJson">作为JSON导出</a></li>
                        <li><a href="#" download id="exportSvg">作为SVG导出</a></li>
                        <li class="option">
                            <div>
                                <form class="converter-form" id="url-copy-form">
                                    <label for="exportedUrl">导出为URL:</label>
                                    <input type="text" id="exportedUrl" placeholder="an URL">
                                    <span id="copyBt" title="Copy to Clipboard">拷贝</span>
                                </form>
                            </div>
                        </li>
                    </ul>
                </li>
                <li id="select"><a href="#">浏览／上传</a>
                    <ul class="toolTipMenu select">
                        <li><a href="#foaf" id="foaf">朋友之友(FOAF)词汇</a></li>
                        <li><a href="#muto" id="muto">模块化和统一标签本体(MUTO)</a></li>
                        <li><a href="#personasonto" id="personasonto">角色本体(PersonasOnto)</a></li>
                        <li><a href="#goodrelations" id="goodrelations">电子商务的词汇表(GoodRelations)</a></li>
                        <li><a href="#jiazailie" id="jiazailie">jiazailie</a></li>
                        <li><a href="#sioc" id="sioc">SIOC (语义相关的在线社区) 核心本体</a></li>
                        <li><a href="#ontovibe" id="ontovibe">本体可视化基准测试(OntoViBe)</a></li>

                        <li class="option" id="converter-option">
                            <form class="converter-form" id="iri-converter-form">
                                <!--<label for="iri-converter-input">本体:</label>-->
                                <input type="text" id="iri-converter-input" placeholder="本体IRI">
                                <button type="submit" id="iri-converter-button" disabled>想象</button>
                            </form>
                            <div class="converter-form">
                                <input class="hidden" type="file" id="file-converter-input" autocomplete="off">
                                <label class="truncate" id="file-converter-label" for="file-converter-input">选择文件</label>
                                <button type="submit" id="file-converter-button" autocomplete="off" disabled>
								上传
							</button>
                            </div>
                        </li>
                    </ul>
                </li>
                <li id="li_locationSearch"> <a title="Nothing to locate, enter search term." href="#" id="locateSearchResult">&#8853;</a></li>
                <li class="searchMenu" id="searchMenuId">
                    <input class="searchInputText" type="text" id="search-input-text" placeholder="搜索">
                    <ul class="searchMenuEntry" id="searchEntryContainer">
                    </ul>
                </li>
                <li id="li_right" style="float:left"><a href="#" id="RightButton"></a></li>
                <li id="li_left" style="float:left"><a href="#" id="LeftButton"></a></li>

                </li>
            </ul>
        </nav>
    </main>
    <script src="js/d3.min.js"></script>
    <script src="js/webvowl.js"></script>
    <script src="js/webvowl.app.js"></script>
    <script src="libs/jquery.min.js"></script>
    <script>
    function oneValues(){
    	var result;
    	var url=window.location.search; //获取url中"?"符后的字串  
    	if(url.indexOf("?")!=-1){
    	result = url.substr(url.indexOf("=")+1);
    	}
    	return result;
    	}
        
        var baseURL = "/knowledge/";
        var owlPath = baseURL + "localFile/owlJson/";
        var status = oneValues();
        if(status=="" ||status==null || status == "undefined"){
        	status = "foaf";
        }
        window.onload = webvowl.app().initialize;
    </script>
</body>

</html>